<?xml version="1.0" encoding="UTF-8" ?>

<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Componentes Visuais do JSF</title>
		
		<style>
			body {font-family: arial}
			h1 { background-color: #CCEFEF; padding: 10px;	}
		</style>
	</h:head>

	<h:body>
		
	<h:form>
		<h1>Caixas de Texto</h1>
		<div>
			<b>h:inputText</b>: Permite que o usuário digite uma linha de texto. <br/>
			<h:inputText />
		</div>
		<hr/>

		<div>
			<b>h:inputTextarea</b>: Permite que o usuário digite várias linha de texto. <br/>
			<h:inputTextarea />
		</div>
		<hr/>

		<div>
			<b>h:inputSecret</b>: Igual ao h:inputText mas não exibe o que foi digitado. <br/>
			<h:inputSecret />
		</div>
		<hr/>
		
		<h1>Rótulos</h1>
		
		<b>h:outputLabel</b>: Rótulos são utilizados para indicar ao usuário o que ele deve preencher em determinada caixa de texto.  <br/>
		<h:outputLabel value="Nome: " for="nome" />
		<h:inputText id="nome" />
		
		<hr/>
		
		<h1>Caixas de Seleção</h1>
		
		<div>
			<b>h:selectBooleanCheckbox</b>: Permite que o usuário faça seleções do tipo “sim ou não”.  <br/>
			<h:selectBooleanCheckbox />
		</div>
		
		<hr/>
		
		<div>
			<b>h:selectManyCheckbox</b>: Permite que o usuário faça múltiplas seleções do tipo “sim ou não”. <br/>
			<h:selectManyCheckbox>
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectManyCheckbox>
		</div>
		
		<hr/>
		
		<div>
			<b>h:selectOneRadio, h:selectOneMenu, h:selectOneListbox</b>: Permitem a seleção de uma única opção de um conjunto de opções. A principal diferença entre
			essas tags é modo como elas são apresentadas visualmente.  <br/>
			<br/>
			<b>h:selectOneRadio:</b><br/>
			<h:selectOneRadio>
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectOneRadio> <br/>
			
			<b>h:selectOneMenu:</b><br/>
			<h:selectOneMenu>
				<f:selectItem itemLabel="Nenhum" noSelectionOption="true" />
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectOneMenu>   <br/><br/>
			
			<b>h:selectOneListbox:</b><br/>
			<h:selectOneListbox>
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectOneListbox>
		</div>
		
		<hr/>
		
		<div>
			<b>h:selectManyListbox, h:selectManyMenu</b>: Possibilita a seleção de diversas opções de um conjunto de opções. A diferença principal entre
			essas duas tags é modo como elas são apresentadas visualmente.  <br/><br/>
			
			<b>h:selectManyListbox</b>:<br/>
			<h:selectManyListbox>
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectManyListbox> <br/><br/>
			
			<b>h:selectManyMenu</b>:<br/>
			<h:selectManyMenu>
				<f:selectItem itemValue="1" itemLabel="Item 1" />
				<f:selectItem itemValue="2" itemLabel="Item 2" />
				<f:selectItem itemValue="3" itemLabel="Item 3" />
			</h:selectManyMenu>
		</div>		
		
		<hr/>
		
		<h1>Botões e Links</h1>
		
		<div>
			<b>h:commandButton e h:commandLink</b>: Enviam os dados de um formulário HTML para o servidor através do método POST do HTTP. <br/><br/>
			
			<b>h:commandButton</b>:<br/>
			<h:commandButton value="commandButton"/>
			
			<br/><br/>
			
			<b>h:commandLink</b>:<br/>
			<h:commandLink value="commandLink" action="jsf1" />
		</div>
		
		<hr/>
		
		<div>
			<b>h:button e h:link</b>: Realizam requisições HTTP do tipo GET. As URLs das requisições são geradas pelo JSF a partir do atributo outcome.<br/>
			
			<b>h:button</b>:<br/>
			<h:button value="h:button" /> 
			
			<br/><br/>
			
			<b>h:link</b>:<br/>
			<h:link value="h:link" />
		</div>
		
		<hr/>
		
		<div>
			<b>h:outputLink</b>: Também realiza requisições HTTP do tipo GET, mas exige que a URL de destino seja explicitamente especificada.<br/>
			<h:outputLink value="http://www.utfpr.edu.br">UTFPR</h:outputLink>
		</div>

		<hr/>
		
		<h1>Imagens</h1>
		
		<div>
			<b>h:graphicImage</b>: Usado para inserir imagens.<br/>
			<h:graphicImage url="http://www.utfpr.edu.br/logo.png"/>
		</div>
		
		</h:form>
	</h:body>

</html>